<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { useGetRegisterCodeList } from '@/services/pages/code'
  import { nextTick, ref } from 'vue'
  import _ from 'lodash'
  import useGoods from '../useGoods'
  import { onUnmounted } from 'vue'
  import { TableInstance } from 'element-plus'

  const {
    registeredCodeList,
    registeredCodeListTotal,
    getRegisterCodeListLoading,
    getRegisteredCodeListParam,
    getRegisterCodeList,
  } = useGetRegisterCodeList()
  const { goods } = useGoods()

  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)
  const userId = ref('')
  const selectedRegisterCodes = ref<Array<CodeRegisteredCodeList>>([])
  const unSelectedRegisterCodes = ref<Array<CodeRegisteredCodeList>>([])
  const tableInstance = ref<TableInstance | null>(null)

  const getRegisterCodes = async () => {
    if (paginationInstance.value && tableInstance.value) {
      getRegisteredCodeListParam.value.limit = paginationInstance.value.size
      getRegisteredCodeListParam.value.page = paginationInstance.value.current
      await getRegisterCodeList(userId.value)
      nextTick(() => {
        registeredCodeList.value.forEach((item) => {
          const index = goods.value
            .filter((item) => item.type === 1)
            .findIndex(
              (good) =>
                good.goodId === item.goodsId &&
                good.goodSpecId === item.goodsSpecId &&
                good.code === item.code,
            )
          if (index >= 0) {
            tableInstance.value.toggleRowSelection(item, true)
          }
        })
      })
    }
  }

  const handleSelectCode = (codes: Array<CodeRegisteredCodeList>, row: CodeRegisteredCodeList) => {
    selectedRegisterCodes.value = codes
    const isExist = codes.some(
      (code) =>
        code.goodsId === row.goodsId &&
        code.goodsSpecId === row.goodsSpecId &&
        code.code === row.code,
    )
    if (goods.value.filter((item) => item.type === 1).length > 0 && !isExist) {
      unSelectedRegisterCodes.value.push(row)
    }
  }

  const handleSelectAllGood = (codes: Array<CodeRegisteredCodeList>) => {
    selectedRegisterCodes.value = codes
    unSelectedRegisterCodes.value = []
  }

  onUnmounted(() => {
    unSelectedRegisterCodes.value = []
  })

  defineExpose({
    getList: (code = '', model = '', _userId = '') => {
      getRegisteredCodeListParam.value.code = code
      getRegisteredCodeListParam.value.model = model
      userId.value = _userId
      getRegisterCodes()
    },
    getSelectedRegisterCodes: () => {
      return _.cloneDeep(selectedRegisterCodes.value)
    },
    getUnSelectedRegisterCodes: () => {
      return _.cloneDeep(unSelectedRegisterCodes.value)
    },
  })
</script>

<template>
  <div v-loading="getRegisterCodeListLoading" class="customer-goods">
    <div class="table">
      <el-table
        ref="tableInstance"
        :border="true"
        stripe
        resizable
        height="100%"
        :data="registeredCodeList"
        @select="handleSelectCode"
        @select-all="handleSelectAllGood"
      >
        <el-table-column type="selection" width="50" fixed />
        <el-table-column type="index" width="50" fixed label="序号" :align="'center'" />
        <el-table-column show-overflow-tooltip prop="code" width="140" label="条码" />
        <el-table-column show-overflow-tooltip prop="goodsCode" label="产品编号" />
        <!-- <el-table-column show-overflow-tooltip prop="saleModels" label="销售型号" /> -->
        <el-table-column show-overflow-tooltip prop="goodsBrand" label="品牌" />
        <el-table-column show-overflow-tooltip prop="goodsName" label="名称" />
        <el-table-column show-overflow-tooltip prop="goodsModel" label="型号" />
        <el-table-column show-overflow-tooltip prop="goodsSpecName" label="规格" />
        <el-table-column show-overflow-tooltip prop="goodsType" label="类型" width="140" />
        <el-table-column show-overflow-tooltip label="地址" width="180">
          <template #default="{ row }">
            {{ `${row.province}   ${row.city}  ${row.area}  ${row.town}  ${row.address}` }}
          </template>
        </el-table-column>
        <el-table-column prop="warrantyDay" label="质保时间(天)" width="140" />
        <el-table-column prop="warrantyStartTime" label="质保开始" width="140" />
        <el-table-column prop="warrantyEndTime" label="质保截止" width="140" />
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="paginationInstance"
        :list_total="registeredCodeListTotal"
        @size-change="getRegisterCodes"
        @current-change="getRegisterCodes"
      ></Pagination>
    </div>
  </div>
</template>

<style scoed lang="scss">
  .customer-goods {
    height: 99%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .table {
      max-height: calc(100% - 40px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
